<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle-1 {
            width: 0;
            height: 0;
            border: 20px solid;
            /* border-left-width: 0; */
            /* border-bottom-width: 20px; */
            border-color: transparent transparent red transparent;
        }

        .triangle-2 {
            width: 100px;
            height: 100px;
            background: red;
            clip-path: polygon(50% 0, 100% 100%, 0 100%);
        }

        .triangle-3 {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, transparent 50%, red 50%);
        }
    </style>
</head>

<body>
    <h1>-三角形实现</h1>
    <h2>1. border(top,right,bottom,left)</h2>
    <div class="triangle-1"></div>
    <h2>2. clip-path</h2>
    <div class="triangle-2"></div>
    <h2>3. linear-gradient</h2>
    <div class="triangle-3"></div>
    <h1>-盒模型(margin + border + padding + content)</h1>
    <h2>IE盒模型（怪异盒模型）</h2>
    <p>width/height: border + padding + content</p>
    <h2>标志盒模型</h2>
    <p>width/height: content</p>
    <h1>-定位（position）</h1>
    <h2>relative, absolute, fixed, sticky</h2>
    <div class="box" style="
        width:200px;
        height:200px;
        background: red;
        border: 10px solid blue;
        margin-left: 10px;
    "></div>
</body>

</html>